import React, { FC, useState } from 'react';
import cn from 'classnames';

import { Link } from '@libs/elk-ui/link/Link';
import { Card } from '@libs/elk-ui/card';

import { ResumeEmptyTmpl } from './ResumeEmptyTmpl';
import { ResumeTmplModel } from './tmpl.types';
import { ResumeContentfulTmpl } from './ResumeContentfulTmpl';
import { ResumeTmplTopAction } from './ResumeTmplTopAction';
import { ResumeTmplCenterAction } from './ResumeTmplCenterAction';
import { ResumeTmplPreviewModal } from './ResumeTmplPreviewModal';

const COM_PREKEY = 'ResumeTmpl';

interface ResumeTmplProps extends ResumeTmplModel {
    isEmpty?: boolean;
}

const ResumeTmpl: FC<ResumeTmplProps> = (props) => {
    const [isShowPreview, setIsShowPreview] = useState<boolean>(false);

    const handleQuickPreviewClick = () => {
        setIsShowPreview(true);
    };

    return (
        <>
            <Card specClassName="rsm" isShadowed>
                {!props.isEmpty && (
                    <>
                        <ResumeTmplTopAction />
                        <ResumeTmplCenterAction onQuickPrefixClick={handleQuickPreviewClick} />
                    </>
                )}

                <Link title={props.title} href={props.href}>
                    <div className={cn('content', { 'is-empty': props.isEmpty })}>
                        {props.isEmpty ? (
                            <ResumeEmptyTmpl />
                        ) : (
                            <ResumeContentfulTmpl title={props.title} img={props.img} />
                        )}
                    </div>
                </Link>
            </Card>
            {
                <ResumeTmplPreviewModal
                    isShow={isShowPreview}
                    onClose={() => {
                        console.log('关闭弹窗');
                        setIsShowPreview(false);
                    }}
                />
            }
        </>
    );
};

ResumeTmpl.displayName = 'ResumeTmpl';

export { ResumeTmpl, ResumeTmplProps };
